<template>
  <div class="monitoring">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-diagnose" />
        </span>
        <div class="d-flex">
          <span class="fs-xxl text mx-2 mt-1">异常出校</span>
          <dv-decoration-3 style="width:100px;height:25px;" :color="datavColors"/>
        </div>
      </div>
      <div @click="handleClick($event)">
        <vue-seamless-scroll
          :data="data.honorList"
          class="warp"
          :class-option="data.classOption"
        >
          <ul>
            <dv-border-box-10
              class="item"
              v-for="(item, index) in data.honorList"
              :color="datavColors"
              :key="index"
            >
              <li>
                <img class="img" :data-obj="JSON.stringify(item)" :src="item.img" alt="" />
                <div style="text-align: center">
                  <h3 class="name">{{ item.class }}</h3>
                  <span class="fs-xxl">{{ item.time }}</span>
                </div>
                <div>
                  <div>
                    <span class="count online">{{ item.name }}</span>
                  </div>
                  <div>
                    <span :class="item.status==0?'offline':'online'">{{ item.status==0?'未处理':'已处理'}}</span>
                  </div>
                </div>
              </li>
            </dv-border-box-10>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive } from "vue";
import { useStore } from 'vuex'
import vueSeamlessScroll from "vue-seamless-scroll/src";
export default defineComponent({
  components: {
    vueSeamlessScroll,
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    const data = reactive({
      honorList: [
        {
          img: require("@/assets/school.png"),
          class: "高一年级2班",
          name: '夏凡',
          time: "2022-07-22 15:02:31",
          status: 0,
        },
        {
          img: require("@/assets/school_1.png"),
          class: "高一年级5班",
          name: '解澳',
          time: "2022-07-22 13:22:19",
          status: 0,
        },
        {
          img: require("@/assets/school_2.png"),
          class: "高二年级3班",
          name: '李佳玉',
          time: "2022-07-22 12:46:05",
          status: 1,
        },
        {
          img: require("@/assets/school_3.png"),
          class: "高二年级6班",
          name: '唐长松',
          time: "2022-07-22 10:34:09",
          status: 1,
        },
        {
          img: require("@/assets/school_3.png"),
          class: "高三年级8班",
          name: '吴勍',
          time: "2022-07-22 08:56:40",
          status: 1,
        },
      ],
      classOption: {
        step: 0.3, //滚动的速度
        limitMoveNum: 1, //开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, //鼠标悬停，true/false
        direction: 1, //滚动的方向，0向下 1向上 2向左 3向右
        openWatch: true, //开启数据实时监控刷新dom，true/false
        singleHeight: 0, //滚动多少高度停留一次
        singleWidth: 0, //无缝不停止的滚动
        waitTime: 1000, //单步运动停止的时间(默认值1000ms)
      },
    });

    const handleClick = (val:any) =>{
      if(val.target.dataset.obj){
        let InfoAnync = JSON.parse(val.target.dataset.obj)
        console.log(InfoAnync);
      }
    }

    return {
      data,
      datavColors,
      handleClick
    };
  },
});
</script>

<style lang="scss" scoped>
$box-height: 400px;
$box-width: 100%;
.monitoring {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.warp {
  height: 320px;
  width: 100%;
  margin-top: 10px;
  padding: 0px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    .item {
      padding: 16px;
      margin: 10px 0;
    }
    li {
      display: block;
      display: grid;
      margin: 10px 0;
      grid-template-columns: 3fr 6fr 2fr;
      .img {
        cursor: pointer;
        width: 160px;
        height: 150px;
      }
      .name,
      .count {
        line-height: 85px;
      }
      .online {
        font-size: 24px;
        color: #ffffff;
        text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00a67c,
          0 0 7px #00a67c;
      }
      .offline {
        font-size: 26px;
        color: #ffffff;
        text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #a62700,
          0 0 7px #a62700;
      }
    }
  }
}
</style>
